<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-24 15:04:13
 * 天凉好个秋
-->
<template>
  <div>
    <AttrTab v-model="tabType" />
    <!--基础设置-->
    <div v-show="tabType == 1" class="att-con-box">
      <div class="attr-nav-item" v-for="(item, index) in attr.list" :key="item.id">
        <div class="ht">
          <div class="t" :class="{ 'on': item.open }" @click="$util.openAttr(attr.list, index)">
            图文导航{{ index + 1 }}
            <span class="el-icon-arrow-down"></span>
          </div>
          <!-- 右侧的上下移动及删除的组件 -->
          <AttrListOptions :list="attr.list" :index="index" />
        </div>
        <transition name="down">
          <div class="hm" v-if="item.open">
            <SetTextAttr :textAttr="item.title" />
            <SetImgAttr :moduleData="item.img" small title="上传图标" size="110 * 110, 比例1:1" />
            <SetLinkAttr :link="item.link" />
          </div>
        </transition>
      </div>
      <div class="attr-nav-add" @click="addNavList">
        <span class="el-icon-circle-plus-outline"></span>
        添加
      </div>
    </div>
    <!--样式设置-->
    <div v-show="tabType == 2" class="att-con-box">
      <div class="att-con-pd">
        <SetModuleBaseAttr :moduleBase="attr.attrs" defBgColor="red" />
        <SetColorAttr title="文字颜色" :attr="attr.attrs" ckey="fontColor" defColor="#333" />
        <SetColorAttr title="指示器颜色" :attr="attr.attrs" ckey="dotColor" defColor="#718093" />
        <SetSwitchAttr title="图片样式" :attr="attr.attrs" ckey="circle" onName="圆形图片" offName="默认样式" />
        <SetRadioValueAttr title="模块行数" :attr="attr.attrs" ckey="row" :list="rowList" />
        <SetRadioValueAttr title="模块列数" :attr="attr.attrs" ckey="col" :list="colList" />
      </div>
    </div>
  </div>
</template>

<script>
import module from "@/util/module.js";
export default {
  name: "AttrNav",
  props: ["attr"],
  data() {
    return {
      tabType: 1,
      rowList: [
        { name: "1行", value: 1 },
        { name: "2行", value: 2 }
      ],
      colList: [
        { name: "4列", value: 4 },
        { name: "5列", value: 5 }
      ]
    };
  },
  methods: {
    //添加导航项
    addNavList() {
      this.$util.addItem(this.attr.list, module.navItem());
    }
  }
};
</script>

<style></style>
